<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
    
    <link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>
    
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
    
    <script src="https://cdn.bootcss.com/clipboard-polyfill/3.0.0-beta3/clipboard-polyfill.promise.js"></script>
    
    <style>
    body{
      margin: 0px;
      padding: 0px;
    }
    </style>
    
  </head>
  <body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
    <div id="app">
      <br/>
      <div id="editor"></div>
      <div id="content" style="display:none;"><%- content  %></div>
      <div class="mdui-divider"></div>
      <br/>
      <button id="btn-copy-rich-text"  class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" onclick="copyRichText()">复制富文本</button>
      <button id="btn-copy-plain-text" class="mdui-btn mdui-btn-raised mdui-ripple" onclick="copyPlainText()">复制纯文本</button>
    </div>
    
  <script>
    var E = window.wangEditor;
    var editor = new E('#editor');
    editor.customConfig.menus = []
    editor.create();
    editor.txt.html(document.querySelector('#content').innerHTML);
    editor.$textElem.attr('contenteditable', false); // 禁止编辑
    
    var os = function() {
         var ua = navigator.userAgent,
         isWindowsPhone = /(?:Windows Phone)/.test(ua),
         isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, 
         isAndroid = /(?:Android)/.test(ua), 
         isFireFox = /(?:Firefox)/.test(ua), 
         isChrome = /(?:Chrome|CriOS)/.test(ua),
         isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
         isPhone = /(?:iPhone)/.test(ua) && !isTablet,
         isPc = !isPhone && !isAndroid && !isSymbian;
         return {
              isTablet: isTablet,
              isPhone: isPhone,
              isAndroid : isAndroid,
              isPc : isPc
         };
    }();

    
    function setEditorHeight(){
      let height = window.screen.availHeight * 0.8;
      document.querySelector('.w-e-text-container').style.height=height + 'px';
    }
    
    // 判断浏览器是否是PC端
    if(!os.isPc){
      // 如果不是PC端，隐藏编辑器
      document.querySelector('#editor').style.display='none';
      // 取消contetnt的隐藏
      document.querySelector('#content').style.display=null;
    }else{
      setEditorHeight();
    }
    
    const toast = {
      success(message){
        mdui.snackbar({
          message: message,
          timeout: 2000,
          position: 'top',
          onOpen: function(){
            document.querySelector('.mdui-snackbar').style.background='#4CAF50';
          }
        });
      },
      info(message){
        mdui.snackbar({
          message: message,
          timeout: 2000,
          position: 'top',
          onOpen: function(){
            document.querySelector('.mdui-snackbar').style.background='#03A9F4';
          }
        });
      },
      error(message){
        mdui.snackbar({
          message: message,
          timeout: 2000,
          position: 'top',
          onOpen: function(){
            document.querySelector('.mdui-snackbar').style.background='#D50000';
          }
        });
      },
      warning(message){
        mdui.snackbar({
          message: message,
          timeout: 2000,
          position: 'top',
          onOpen: function(){
            document.querySelector('.mdui-snackbar').style.background='#FFD600';
          }
        });
      }
    }
    
    function copyRichText(){
      let richText = editor.txt.html();
      let dt = new clipboard.DT();
      dt.setData("text/html", richText);
      clipboard.write(dt);
      toast.success('成功复制');
    }
    
    function copyPlainText(){
      let plainText = editor.txt.text();
      let dt = new clipboard.DT();
      dt.setData("text/plain", plainText);
      clipboard.write(dt);
      toast.success('成功复制');
    }
    
    // 美化界面
    (function(){
      document.querySelector('.w-e-toolbar').style.display='none';
    })();
    
  </script>
  </body>
</html>
